<template>
	<div id="main" class="hander-car">
		<div class="store-content">
			<div class="cart-box">
				<div class="title">
					<h2>购物清单</h2>
				</div>
				<div class="cart-inner">
					<div class="empty-label" v-if="count<=0">
						<h3>您的购物车中还没有商品</h3>
						<router-link class="link" to="/Shop">现在选购</router-link>
					</div>
					<div v-else>
						<div class="cart-table-title">
							<span class="name">商品信息</span>
							<span class="operation">操作</span>
							<span class="subtotal">小计</span>
							<span class="num">数量</span>
							<span class="price">单价</span>
						</div>
						<div class="cart-table">
							<div class="cart-group">
								<!--购物列表-->
								<div class="cart-top-items" v-for="item,index in carPanelData">
									<div class="cart-items">
										<div class="items-choose">
											<!-- 加入购物车 默认选中 -->
											<span class="blue-checkbox-new" @click="checkGoods(item.sku_id)" :class="{'checkbox-on':item.check}"><a></a></span>
										</div>
										<div class="items-thumb">
											<img :src="item.ali_image+'?x-oss-process=image/resize,w_80/quality,Q_100/format,webp'">
											<a href="javascript:;" target="_blank"></a>
										</div>
										<div class="name hide-row" >
											<div class="name-table">
												<a href="javascript:;" target="_blank">{{item.title}}</a>
												<ul class="attribute">
													<li>{{item.spec_json.show_name}}</li>
												</ul>
											</div>
										</div>
										<div class="operation">
											<a class="items-delete-btn" @click="delCarPanelData(item.sku_id)"></a>
										</div> 
										<div class="subtotal">¥{{item.price*item.count}}</div>
										<div class="item-cols-num">
											<div class="select js-select-quantity">
												<span class="down" :class="{'down-disabled':item.count<=1}" @click="subCartPanelData(item.sku_id)">-</span>
												<span class="num">
													{{item.count}}
												</span>
												<span class="up" :class="{'up-disabled':item.count>=item.limit_num}" @click="plusCartPanelData(item.sku_id)">+</span>
												
											</div>
										</div>
										<div class="price">¥{{item.price}}</div>
									</div>
								</div>								
							</div>
						</div>
					</div>
				</div>
				<div class="cart-bottom-bg fix-bottom" v-if="count>0">
					<div class="cart-bar-operation">
						<div>
							<div class="choose-all js-choose-all">
								<span class="blue-checkbox-new" @click="allCheckGoods(allChecked)" :class="{'checkbox-on':allChecked}"><a></a></span>
								全选
							</div>
							<div class="delete-choose-goods" @click="delCheckGoods" >删除选中的商品</div>
						</div>
					</div>
					<div class="shipping">
						<div class="shipping-box">
							<div class="shipping-total shipping-num">
								<h4 class="">
									已选择 <i>{{checkedCount}}</i> 件商品
								</h4>
								<h5>
									共计 <i >{{count}}</i> 件商品
								</h5>
							</div>
							<div class="shipping-total shipping-price">
								<h4 class="">
									应付总额：<span>￥</span><i >{{checkedPrice}}</i> 
								</h4>
								<h5 class="shipping-tips">
									应付总额不含运费
								</h5>
								
							</div>
						</div>
						<router-link tag="span" to='/Checkout' class="jianguo-blue-main-btn big-main-btn js-checkout" :class='{"disabled-btn":checkedCount<=0}'>
							<a href="#">现在结算</a>
						</router-link>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default{
	data(){
		return{
		
		} 
	},
	computed:{
		carPanelData(){
			return this.$store.state.carPanelData
		},
		count(){
			return this.$store.getters.totleCount
		},
		//全选显示 不选不显示
		allChecked(){
			return this.$store.getters.allChecked
		},
		//总额
		checkedPrice(){
            return this.$store.getters.checkedPrice

		},
		//总数 数量
		checkedCount(){
			return this.$store.getters.checkedCount
		}

	},
	methods:{
		// 删除产品
		delCarPanelData(id){
			this.$store.commit('delCarPanelData',id)
		},
		//增加		
		plusCartPanelData(id){
			this.$store.commit('plusCartPanelData',id)
		},
		//减少
		subCartPanelData(id){
			this.$store.commit('subCartPanelData',id)
		},
		//选中
		checkGoods(id){
			this.$store.commit('checkGoods',id)
		},
		//控制全选
		allCheckGoods(allChecked){
            this.$store.commit('allCheckGoods',allChecked)
		},
		//删除选中
		delCheckGoods(){
            this.$store.commit('delCheckGoods')			
		}
	}
}	

</script>
<style>	
@import url(../assets/css/cart.css);
</style>